<template>
  <div>
    <div class="tab">
      <div @click="handleBack">返回</div>
      <div>城市</div>
    </div>

    <div class="content">
      <div class="header">
        <div class="title">
          <span @click="handleBack">×</span>
          <span>当前城市 -</span>
        </div>
        <div class="search">
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            @keydown.enter="handleSearch"
          />
        </div>
      </div>

      <div class="container">
        <div class="nav">
          <div class="gpsCity">
            <p>GPS定位你所在的城市</p>
            <div class="cityIndexDetail">
              <div class="city-item" @click="handleCity(positionCity)">{{ positionCity }}</div>
            </div>
          </div>
          <div class="hotCity">
            <p>热门城市</p>
            <div class="cityIndexDetail">
              <div
                class="city-item"
                v-for="item of citys.hotCities"
                :key="item.id"
                @click="handleCity(item.name)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>

        <van-index-bar :index-list="indexList" :sticky="false">
          <div v-for="(item, index) of citys.cities" :key="index">
            <van-index-anchor :index="index" />
            <van-cell
              v-for="(list, index) of item"
              :key="index"
              :title="list.name"
              @click="handleCity(list.name)"
            />
          </div>
        </van-index-bar>
      </div>

      <div class="cover" v-if="searchCity.length == 0 ? false : true">
        <ul>
          <li
            v-for="(item, index) of searchCity"
            :key="index"
            @click="handleCity(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axiosJsonp from "axios-jsonp";

export default {
  data() {
    return {
      value: "",
      positionCity: "",
      indexList: [],
      citys: [],
      searchCity: [],
    };
  },
  methods: {
    handleSearch() {
      var res = this.citys;
      var arr = [];
      var values = Object.values(res.cities);
      values.forEach((item) => {
        item.forEach((c) => {
          if (c.name.includes(this.value)) {
            arr.push(c.name);
          }
        });
      });
      this.searchCity = arr;
    },
    handleCity(val) {
      this.setLocalStorage("city", val);
      this.$router.back();
    },
    setLocalStorage(key, value) {
      if (value instanceof Array || value instanceof Object) {
        value = JSON.stringify(value);
      }
      localStorage.setItem(key, value);
    },
    handleBack() {
      this.$router.back();
    },
  },
  mounted() {
    this.$http("http://47.108.197.28:8000/city").then((res) => {
      this.citys = res.data.data;
      this.indexList = Object.keys(this.citys.cities);
    });

    this.$http({
      url: "https://apis.map.qq.com/ws/location/v1/ip",
      adapter: axiosJsonp,
      params: {
        key: "2KEBZ-FM4K3-UVE3W-YN4SD-3OT7K-LHFTI",
        output: "jsonp",
      },
    }).then((res) => {
      var { city } = res.data.result.ad_info;
      this.positionCity = city;
    });
  },
};
</script>

<style scoped>
.tab {
  display: flex;
  align-items: center;
  height: 80px;
  font-size: 32px;
  padding: 0 2px;
  border-bottom: 1px solid #aaa;
}
.tab > div:nth-child(2) {
  margin-left: 260px;
  font-size: 38px;
}
.cover {
  width: 10rem;
  height: 20rem;
  background-color: white;
  position: absolute;
  top: 1.7333rem;
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.title {
  position: relative;
  width: 10rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #fff;
  font-size: 0.4667rem;
  text-align: center;
}
.title > span:nth-child(1) {
  position: absolute;
  left: 0.2667rem;
  font-size: 0.6667rem;
}
.van-search .van-cell {
  height: 0.5333rem;
  line-height: 0.4rem;
}
.container {
  background-color: initial;
  position: absolute;
  width: 10rem;
  top: 1.8133rem;
  min-height: 20rem;
}
.nav {
  background-color: #fff;
  padding-left: 0.2rem;
  padding-top: 0.2rem;
  box-sizing: border-box;
}
.nav > div > p {
  font-size: 0.4rem;
  color: #666;
  margin-bottom: 0.1333rem;
}
.city-item {
  height: 60px;
  width: 2.5333rem;
  background-color: #f4f4f4;
  line-height: 0.8rem;
  border-radius: 0.04rem;
  box-sizing: border-box;
  margin: 0.2rem;
  font-size: 0.3733rem;
  text-align: center;
  color: #191a1b;
  display: inline-block;
}
.van-index-bar__sidebar .van-index-bar__index {
  font-size: 0.28333rem !important;
  line-height: 0.3667rem !important;
}
.van-search {
  width: 10rem;
}
</style>